<template>
	<div>
		<!--中间  -->
		<div class="container-fuild" id="content">
			<!-- 提示还有咖啡主图 -->
			<div class="pic">
				<img class="mx-auto d-block pic-1" src="../assets/Titile.png" alt="">
				<img class="mx-auto d-block pic-2 shadow-sm p-3 mb-5 bg-white rounded" src="../assets/MajorCoffee.jpg"
					alt="">
			</div>
		</div>
		<!-- 商品展示提示消息 -->
		<div class="container" id="News">
			<div class="Newtitle">
				<div class="CNtitle">最新消息</div>
				<div>· what's new ·</div>
			</div>
			<!-- 商品展示细节 -->
			<div id="ProductDetile">
				<ul class="list-unstyled" v-for="(commodity,index) in commodityList" :key="index">
					<li class="media">
						<img :src="commodity.commodityImg" class="mr-3" alt="...">
						<div class="media-body">
							<h5 class="mt-0 mb-1">{{commodity.commodityName}}</h5>
							<p>{{commodity.commodityDetails}}</p>
						</div>
						<button type="button" class="btn btn-lg btn-primary" @click="purchase(index)">点击购买</button>
					</li>
				</ul>
			</div>

		</div>
	</div>
</template>

<script>
	import dayjs from 'dayjs'
	export default {
		name: 'MyShop',
		data() {
			return {
				commodityList: [
					{
						commodityName: '香草拿铁 (Vanilla latte)',
						commodityImg: require('../assets/coffee1.jpg'),
						commodityDetails: '\xa0\xa0\xa0\xa0\xa0' +
							'在冰拿铁中特别加入了香草糖浆，使口感变得苦中带甜。浪漫甜香的香草风味、浓郁饱满的奶香、香醇的咖啡风味，都在舌尖变得清晰无比，多重风味融汇出醇润香滑的美妙体验，很受女士青睐'
					},
					{
						commodityName: '草莓摩卡咖啡 (Strawberry Mocha)',
						commodityImg: require('../assets/coffee2.png'),
						commodityDetails: '\xa0\xa0\xa0\xa0\xa0' +
							'将一半的草莓果粒果酱和一半的冰牛奶放入到钢杯中,加入草莓浓缩汁;用咖啡机蒸汽管加热至约65℃,再将另一半的冰牛奶和糖浆倒入钢杯,用咖啡机蒸汽管加热至约65℃。唇齿间浪漫的味道体验'
					},
					{
						commodityName: '雪顶玛奇朵 (snow-capped Macchiato)',
						commodityImg: require('../assets/coffee3.jpg'),
						commodityDetails: '\xa0\xa0\xa0\xa0\xa0' +
							'玛奇朵Macchiato在意大利文里是“印记、烙印”的意思，奶霜漂浮在红茶上面，人们喝的时候，红茶会在入口前先经过奶霜，而奶霜就像瞬间烙印在茶汤上，所以叫玛奇朵。如果说摩卡像黑巧克力的话，那么玛奇朵就是太妃糖，给人柔和的温柔感，而且细腻的奶沫与焦糖结合后，如浮云般细腻润滑。'
					}
				],
			}
		},
		mounted(){
			this.$bus.$on('getcommodity',this.getcommodity)
		},
		methods: {
			purchase(id) {
				if(confirm('确定购买？')){
					this.$bus.$emit('record',this.commodityList[id],dayjs(Date()).format("YYYY-MM-DD HH:mm:ss"))
				}
			},
			getcommodity(commodity){
				this.commodityList.push(commodity)
				console.log(this.commodityList);
			}
		}
	}
</script>

<style>

</style>
